<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="selsChange">
      <el-table-column v-if="tableConfig.selection" type="selection" width="50" align="center" />
      <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label">
        <template v-slot="scope" v-if="item.prop === 'status'">
          <el-tag v-if="scope.row.status === 1" type="danger">初审被拒 </el-tag>
          <el-tag v-if="scope.row.status === 2" type="info">待二审 </el-tag>
          <el-tag v-if="scope.row.status === 3" type="success">终审通过 </el-tag>
        </template>
        <template v-slot="scope" v-if="item.prop === 'type'">
          <span>{{ scope.row.type === 1 ? '否' : '是' }}</span>
        </template>
        <!-- 判断是否显示switch开关 -->
        <template v-slot="scope" v-if="item.prop === 'is_use'">
          <el-switch @change="Switches(scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.is_use"
            class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(153, 153, 153);" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableConfig.otherButton | tableConfig.delButton | tableConfig.editButton | tableConfig.AuditButton"
        label="操作">
        <template #default="scope">
          <el-button type="info" v-if="tableConfig.otherButton" size="small"
            @click="godetails(scope.row)">详情</el-button>
          <el-button v-if="tableConfig.AuditButton" size="small" @click="open(scope.row.id)">分配权限</el-button>
          <el-button type="success" v-if="tableConfig.editButton" size="small" @click="updata(scope.row)">修改</el-button>
          <el-button v-if="tableConfig.delButton" size="small" type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 30px" :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled"
      :background="background" layout="total, sizes, prev, pager, next, jumper" :total="tableConfig.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRaw, ref, defineEmits } from 'vue';
import router from '../router';
const emit = defineEmits(['pageChange', 'sizeChange', 'SwitchEmit', 'id', 'ids', 'IDdetails', 'update',"power"]);
const res = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  tableColumns: {
    type: Array as any,
    required: true,
  },
  tableConfig: {
    type: Object,
    required: true,
  },
});
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
toRaw(res.tableColumns);
const handleSizeChange = (val: number) => {
  emit('sizeChange', val);
};
// 点击切换页数
const handleCurrentChange = (val: number) => {
  emit('pageChange', val);
};
// 跳转详情页
const godetails = (date: any) => {
  // router.push({ path: res.tableConfig.details, query: { date: JSON.stringify(date) } })
  emit('IDdetails', date)
  // console.log(date);
}
// 修改
const updata = (data: any) => {
  emit('update', data)
}
// 批量删除
const selsChange = (val: any) => {
  // const res: any = val.map((item: { admin_id: any; }) => item.admin_id)
  emit('ids', JSON.stringify(val))
  console.log(JSON.parse(JSON.stringify(val)));

}
// 单删
const del = (data: any) => {
  emit('id', data)
}
// 更改状态
const Switches = (data: any) => {
  emit('SwitchEmit', data)
}
// 修改权限
const open = (data:any) => {
    emit('power',data)
}
</script>

<style lang="less" scoped>
/deep/.el-table th>.cell {
  color: #909399;
}

/deep/.el-table .cell {
  text-align: center;
  font-size: 14px;
  color: #606266;
}

// /deep/.el-pagination {
//   justify-content: flex-end;
// }


:deep(.el-pagination) {
  margin-top: 30px !important;
  float: right;
}
</style>
